/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-05-09 15:16:38
 * @LastEditTime : 2023-06-12 13:43:30
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Common\Template\BeamSchedule.jsx
 * @Description  :
 */
import './Scss/BeamSchedule.scss'
import { useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useEffect, useState } from 'react'

export const BeamSchedule001 = ({ uuid }) => {
    const { run: geyConstructionBridgeProgress } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            if (res.length !== 0) {
                let data = []
                res.forEach(
                    ({ bridgeName, totalNum, completeNum, percent }) =>
                        (data = [...data, [bridgeName, totalNum, completeNum, `${parseInt(percent * 10000) / 100}%`]]),
                )
                setDataOne(data)
            }
        },
    })
    const { run: geyConstructionBeamTypeProgress } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            if (res.length !== 0) {
                let data = []
                res.forEach(
                    ({ tableName, totalNum, completeNum, percent }) =>
                        (data = [...data, [tableName, totalNum, completeNum, `${parseInt(percent * 10000) / 100}%`]]),
                )
                setDataTwo(data)
            }
        },
    })
    useEffect(() => {
        geyConstructionBridgeProgress({ url: `getConstructionBridgeProgress`, data: { organizationUuid: uuid } })
        geyConstructionBeamTypeProgress({ url: `getConstructionBeamTypeProgress`, data: { organizationUuid: uuid } })
    }, [geyConstructionBeamTypeProgress, geyConstructionBridgeProgress, uuid])

    const [TitleOne] = useState([
        { uuid: '1', title: '名称', flex: 110 },
        { uuid: '2', title: '总数', flex: 73 },
        { uuid: '3', title: '完成', flex: 73 },
        { uuid: '4', title: '百分比', flex: 96 },
    ])

    const [DataOne, setDataOne] = useState([])

    const [DataTwo, setDataTwo] = useState([])

    return (
        <div className="BeamSchedule001">
            <div>
                <div className="TitleSmall">
                    <div>粱片需求</div>
                    <div />
                </div>
                <div className="Title">
                    {TitleOne.map(({ uuid, title, flex }) => (
                        <div key={uuid} style={{ flex }}>
                            {title}
                        </div>
                    ))}
                </div>
                <div className="List" style={{ height: 56 * 5 }}>
                    {DataOne &&
                        DataOne.map((item, index) => (
                            <div key={index}>
                                {item.map((value, key) => (
                                    <div style={{ flex: TitleOne[key].flex }} key={key}>
                                        {value}
                                    </div>
                                ))}
                            </div>
                        ))}
                </div>
            </div>
            <div>
                <div className="TitleSmall">
                    <div>粱片种类</div>
                    <div />
                </div>
                <div className="Title">
                    {TitleOne.map(({ uuid, title, flex }) => (
                        <div key={uuid} style={{ flex }}>
                            {title}
                        </div>
                    ))}
                </div>
                <div className="List" style={{ height: 56 * 3 }}>
                    {DataTwo &&
                        DataTwo.map((item, index) => (
                            <div key={index}>
                                {item.map((value, key) => (
                                    <div style={{ flex: TitleOne[key].flex }} key={key}>
                                        {value}
                                    </div>
                                ))}
                            </div>
                        ))}
                </div>
            </div>
        </div>
    )
}
